<template>
  <div class="add-user">
    <el-dialog title="新增菜单" :visible.sync="visible" width="700px" @close="formCancel()">
      <el-form ref="editForm" :model="formData" :inline="true" :rules="rules" label-position="right" label-width="100px" :disabled="disabled">
        <el-row>
          <el-col :span="11">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="formData.name" type="text" placeholder="请输入菜单名称" autocomplete="off" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单编号" prop="code">
              <el-input v-model="formData.code" type="text" placeholder="请输入菜单编号" autocomplete="off" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="所属应用" prop="application">
              <el-select v-model="formData.application">
                <el-option v-for="(item, index) in applicationArr" :key="index" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单层级" prop="type">
              <el-radio-group v-model="formData.type">
                <el-radio :label="'0'" size="large">目录</el-radio>
                <el-radio :label="'1'" size="large">菜单</el-radio>
                <el-radio :label="'2'" size="large">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="父级菜单" prop="pid">
              <el-select v-model="formData.pid">
                <el-option v-for="(item, index) in pidArr" :key="index" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="openType">
              <span slot="label">
                <el-tooltip class="tool-tip" effect="dark" content="按钮：无，菜单：内链、外链、组件" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                打开方式
              </span>
              <el-radio-group v-model="formData.openType" @input="changeOpen">
                <el-radio
                  v-for="item in openArr"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="11">
            <el-form-item prop="component">
              <span slot="label">
                <el-tooltip class="tool-tip" effect="dark" content="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                前端组件
              </span>
              <el-input
                v-model="formData.component"
                type="text"
                placeholder="请输入前端组件"
                autocomplete="off"
                clearable
                :disabled="formData.type == '1' && formData.openType == 3 || formData.type == '0' && formData.openType == 3 || formData.type == '2'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="router">
              <span slot="label">
                <el-tooltip class="tool-tip" effect="dark" content="前端vue组件 views文件夹下路径，例：system/menu/index。注：目录级填写：RouteView(不带面包屑)，PageView(带面包屑)，菜单级内链打开http链接填写：Iframe" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                路由地址
              </span>
              <el-input v-model="formData.router" type="text" placeholder="请输入路由地址" autocomplete="off" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="link">
              <span slot="label">
                <el-tooltip class="tool-tip" effect="dark" content="当选择了需要内链或外链打开的选项，此处输入要打开的链接地址，例：https://mate.vip" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                内外链地址
              </span>
              <el-input
                v-model="formData.link"
                type="text"
                placeholder="请输入内外链地址 "
                autocomplete="off"
                clearable
                :disabled="formData.type == '0' && formData.openType == 0 || formData.type == '0' && formData.openType == 1 || formData.type == '1' && formData.openType == 0 || formData.type == '1' && formData.openType == 1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="图标" prop="icon">
              <el-input v-model="formData.icon" type="text" placeholder="请选择图标" autocomplete="off" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="weight">
          <span slot="label">
            <el-tooltip class="tool-tip" effect="dark" content="系统权重：菜单可分配给任何角色，业务权重：菜单对超级管理员不可见" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            权重
          </span>
          <el-radio-group v-model="formData.weight">
            <el-radio :label="'1'" size="large">系统权重</el-radio>
            <el-radio :label="'2'" size="large">业务权重</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否可见" prop="visible">
          <el-switch
            v-model="formData.visible"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formData.sort" type="text" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="徽标" prop="badge">
          <el-input v-model="formData.badge" type="text" placeholder="请输入徽标,dot表示圆点，其他字符直接显示" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="text" autocomplete="off" clearable />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'AddUser',
  components: {},
  props: {},
  data() {
    return {
      formData: {
        type: '1',
        pid: 0,
        openType: 1,
        visible: '是',
        sort: 100
      },
      visible: false,
      applicationArr: [
        {
          name: '系统应用',
          code: 'system'
        },
        {
          name: '业务流程',
          code: 'flow'
        },
        {
          name: '支撑服务',
          code: 'support_sys'
        },
        {
          name: '信息中心',
          code: 'infoCenter'
        },
        {
          name: '举报系统',
          code: 'report_platform'
        }
      ],
      pidArr: [],
      openArr: [
        {
          label: '无',
          value: 0
        },
        {
          label: '组件',
          value: 1
        },
        {
          label: '内链',
          value: 2
        },
        {
          label: '外链',
          value: 3
        }
      ],
      rules: {
        name: [
          {
            required: true, message: '菜单名称不能为空', trigger: 'blur'
          }
        ],
        code: [
          {
            required: true, message: '菜单编号不能为空', trigger: 'blur'
          }
        ],
        application: [
          {
            required: true, message: '请选择菜单层级', trigger: 'blur'
          }
        ],
        pid: [
          {
            required: true, message: '请选择父级菜单', trigger: 'blur'
          }
        ],
        openType: [
          {
            required: true, message: '请选择打开方式', trigger: 'blur'
          }
        ],
        component: [
          {
            required: true, message: '请输入前端组件', trigger: 'blur'
          }
        ],
        router: [
          {
            required: true, message: '请输入路由地址', trigger: 'blur'
          }
        ],
        link: [
          {
            required: true, message: '请输入路由地址', trigger: 'blur'
          }
        ],
        badge: [
          {
            required: false, message: '请输入密码！', trigger: 'blur'
          },
          {
            max: 4, message: '长度不能超过4', trigger: 'blur'
          }
        ]
      },
      disabled: false,
      showTree: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    show() {
      this.visible = true
    },
    formCancel() {
      this.visible = false
    },
    changeOpen(e) {
      if (this.formData.type === '1' && e === 2) {
        this.formData.component = 'Iframe'
      } else {
        this.formData.component = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add-user{
  ::v-deep .el-dialog__body{
    padding-top: 0px;
  }
  .title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    span:first-child{
      display: inline-block;
      width: 60px;
      height: 1px;
      border-top: 1px solid #e8e8e8;
    }
    span:nth-child(2) {
      display: inline-block;
      width: 100px;
      text-align: center;
    }
    span:last-child {
      display: inline-block;
      flex: 1;
      height: 1px;
      border-top: 1px solid #e8e8e8;
    }
  }
  ::v-deep .el-tree-node__content{
    height: 40px;
  }

  .org-box{
    width: 240px;
    height: 50px;
    position: relative;
    overflow: visible;
    .org-name{
      position: absolute;
      top: 0;
      left: 0;
      width: 240px;
      height: 40px;
      border: 1px solid #DCDFE6 ;
      padding: 0 20px 0 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .filter-tree{
      position: absolute;
      width: 100%;
      top: 45px;
      left: 0;
      z-index: 99;
      border: 1px solid #E4E7ED;
    }
  }
  .info-attach{
    ::v-deep .el-form-item__content{
      width: 80%;
    }
  }
  .add-line{
    width: 90%;
    height: 30px;
    margin: 0 auto;
    border: 1px dashed #DCDFE6;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      display: block;
    }
  }

  .org-table{
    width: 200px;
    min-height: 42px;
    overflow: visible;
    .org-name{
      width: 200px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border: 1px solid #DCDFE6 ;
      padding: 0 20px 0 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .filter-tree{
      margin-top: 2px;
      border: 1px solid #E4E7ED;
    }
  }
}
</style>
